<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ember Starter Kit</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpjOF55hC2_pb4iA46kkjUWySYwtRCiso" type="text/javascript"></script>

    </head>
    <body>
        <div id="map" style="width: 500px;height: 300px;"></div>
        <script type="text/javascript" charset="utf-8">
            document.addEventListener("deviceready", onDeviceReady, false);
            google.maps.event.addDomListener(window, 'load', initialize);
            var geo = new google.maps.Geocoder();


            function initialize() {
                var myOptions = {
                    center: new google.maps.LatLng(34.88866, -7.4665777),
                    zoom: 5,
                    scrollwheel: false,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    // Add controls
                    mapTypeControl: true,
                    scaleControl: true,
                    overviewMapControl: true,
                    overviewMapControlOptions: {
                        opened: true
                    }
                };
                map = new google.maps.Map(document.getElementById('map'), myOptions);
                marker = new google.maps.Marker({
                    animation: google.maps.Animation.DROP,
                    draggable: true
                });
                google.maps.event.addListener(map, "click", function(e) {
                    clicked(e.latLng, map);
                });
                google.maps.event.addListener(marker, 'dragend', function(e) {
                    clicked(e.latLng, map);
                });
            }

            function addmarker(position) {
                map.panTo(position);
                map.setZoom(14);
                map.setCenter(position);
                marker.setPosition(position);
                marker.setMap(map);


            }

            function onDeviceReady() {
                var options = {maximumAge: 0, timeout: 60000, enableHighAccuracy: true}
                navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
            }

            function onSuccess(position) {
                addmarker(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

                var element = document.getElementById('geolocation');
                var geo = new google.maps.Geocoder();
                element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
                        'Longitude: ' + position.coords.longitude + '<br />' +
                        '<hr />' + element.innerHTML;

                var ps = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                geo.geocode({'latLng': ps}, function(results, status) {
                    if (status != google.maps.GeocoderStatus.OK) {
                        alert("reverse geocoder failed to find an address for " + position.toUrlValue());
                    }
                    else {
                        address = results[0].formatted_address;
                        var element = document.getElementById('geolocation');
                        element.innerHTML = address + '\nMargem de erro: ' + position.coords.accuracy;

                    }

                });


            }

            // onError Callback receives a PositionError object
            //
            function onError(error) {
                alert('code: ' + error.code + '\n' +
                        'message: ' + error.message + '\n');
            }
            function clicked(position, map) {
                geo.geocode({'latLng': position}, function(results, status) {
                    if (status != google.maps.GeocoderStatus.OK) {
                        alert("reverse geocoder failed to find an address for " + position.toUrlValue());
                    }
                    else {
                        address = results[0].formatted_address;
                        var element = document.getElementById('geolocation');
                        element.innerHTML = address
                    }
                });
                addmarker(position);


            }

        </script>
        <script type="text/x-handlebars">
            <h2>Benvindo Papa Mistas</h2>
            {{#link-to "index"}}index{{/link-to}}
            {{#link-to "teste"}}teste{{/link-to}}
            {{#link-to "posts"}}posts{{/link-to}}

            {{outlet}}
        </script>

        <script type="text/x-handlebars" id="posts">
            <ul>
            {{#each}}

            <li>
            {{#link-to "post" this}}
            {{{title}}}
            {{/link-to}}

            </li>

            {{/each}}
            </ul>
            {{outlet}}
        </script>
        <script type="text/x-handlebars" id="post/edit">
            <p>{{input type="text" value=title}}</p>
            <p>{{input type="text" value=excerpt}}</p>
            <p>{{textarea value=body}}</p>
        </script>
        <script type="text/x-handlebars" id="post">
            {{format-date date}}
            {{#if isEditing}}
            {{partial 'post/edit'}}
            <button {{action 'doneEditing'}}>Done</button>
            {{else}}
            <button {{action 'edit'}}>Edit</button>
            {{/if}}
            {{excerpt}}



        </script>

        <script type="text/x-handlebars" id="teste">

            <ul>
            {{#each item in model}}
            <li>{{item}}</li>
            {{/each}}
            </ul>

        </script>
        <script type="text/javascript" src="cordova.js"></script>
        <script src="js/libs/jquery-1.10.2.js"></script>
        <script src="js/libs/handlebars-1.1.2.js"></script>
        <script src="js/libs/ember-1.7.0.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
        <script src="js/app.js"></script>
        <!-- to activate the test runner, add the "?test" query string parameter -->
        <script src="tests/runner.js"></script>
        <p id="geolocation">Finding geolocation...</p>

    </body>
</html>
